import React, { Component } from 'react'
import style from "./recommond.module.css"
import { Link } from "react-router-dom"
import "../../../setupProxy"
import axios from "axios"
import Author from "../author"
export default class index extends Component {
    state = {
        list: [
            "全部", "风土人情", "实地踩盘", "购房案例", "热点", "精选"
        ],
        alist: [
            "", "风土人情", "实地踩盘", "购房案例", "热点", "精选"
        ],
        // type:["","","","","",""],
        show: false,
        data: [],
        ida: 0,
        idx: 0
    }

    componentDidMount() {
        this.aaa()
        this.bbb()
    }
    bbb() {
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/loupan/recommend/selectRecommend",
            method: 'post',
            data: {
            },
            headers: headerJSON,
        }).then(res => {

            this.setState({
                data: res.data
            })
        })

    }
    aaa() {
      
        let tab = this.state.alist[this.state.idx]
        // console.log(this.state.alist[1],"tab")
        // console.log(this.state.idx)
        // console.log(this.state.alist[this.state.idx],"made")
        axios({
            url: "/loupan/recommend/selectRecommend1/",
            method: 'post',
            data: {
                rclasses:tab
            },
            
        }).then(res => {
            console.log(res,"aaaaa");
            this.setState({
                data: res.data
            })
        })

    }
  
    render() {
        var show = false
        return (
            <div>
                <div>
                    <div className={style.maincon}>
                        <div className={style.head}>
                            <ul>
                                {
                                    this.state.list.map((item, i) => <li key={i} onClick={() => {
                                        this.state.idx = i;
                                       if(i===0){
                                           this.bbb()
                                       }else{
                                           this.aaa()
                                       }
                                    //    this.setState({})
                                    }}
                                        className={this.state.idx === i ? style.active : style.aaa}
                                    >{item}</li>)
                                }
                            </ul>


                        </div>
                                <div className={style.bottom}>
                        {
                            this.state.data.map((item, i) =>
                                <div key={i} className={style.asss}>
                                    <div className={style.content}>
                                        <div className={style.my}><span><img src={item.img} /></span>
                                            <i>{item.rname}</i></div>
                                        {
                                            !this.state.show && <button onClick={() => {
                                                this.state.show = !this.state.show
                                                this.state.ida += 1
                                                this.setState({})
                                            }}>+关注</button>
                                        }
                                        {
                                            this.state.show && <button onClick={() => {
                                                this.state.show = !this.state.show
                                                this.state.ida -= 1
                                                this.setState({
                                                    
                                                })


                                            }}>已关注</button>
                                        }
                                    </div >
                                    <p className={style.text}><span>精选</span> <i>{item.rclasses}</i></p>
                                    <div className={style.body}>
                                        <div className={style.word}>
                                            {item.rtitle}
                                            <Link to={{ pathname: '/reDetail', state: { id: item.rid } }} ><span>查看全文</span></Link>
                                        </div>
                                        <div className={style.tupiana}>
                                            <img src={item.rimg} />
                                        </div>
                                    </div>
                                    <div className={style.view}>
                                        <span>{item.rbrowse}浏览</span>
                                        {/* <button>写评论</button> */}
                                        {/* <i>关注量</i> */}

                                    </div>

                                </div>



                            )
                        }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
